<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>手机号码归属地</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!--引入公用样式-->
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
	</head>

	<body class="dp-n" id="body">
		<header class="mui-bar mui-bar-nav titleBar-bgcolor" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left c-ff"></a>
			<h1 class="mui-title titleBar-color">手机号码归属地</h1>
		</header>
		<!--这里面是content页面-->
		<div class="mui-content">
			<!--头部搜索框-->
			<div class="header-search bs-bb">
				<div class="header-title">
					<span class="c-a3 bdFontSize">请输入您要查询的手机号</span>
				</div>
				<!--搜索框-->
				<div class="header-inp">
					<input type="text" class="bdFontSize" placeholder="11位手机号" id="val" value="13800138000" />
					<span></span>
				</div>
				<!--确认按键-->
				<div class="header-btn">
					<button class="bdFontSize c-ff" id="btn">确&nbsp;&nbsp;&nbsp;&nbsp;认</button>
				</div>
			</div>
			<!--显示内容区域-->
			<div class="content bs-bb dp-n" id="results">
				<div class="content-tt bs-bb">
					<span class="ttFontSize c-a3">详细信息</span>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-3">
						<span>手机号码：</span>
					</div>
					<div class="mui-col-xs-9">
						<span id="mobile"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-3">
						<span>归属地：</span>
					</div>
					<div class="mui-col-xs-9">
						<span id="phoneArea"></span>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/immersed.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				plus.nativeUI.showWaiting("加载中...");

				document.getElementById('header').style.height = (immersed + 44) + 'px';
				document.querySelector('.mui-content').style.marginTop = (immersed) + 'px';
				
				// 隐藏了加载层（针对窗口的加载）
				plus.nativeUI.closeWaiting();
				// 把body的class名设为空
				mui('#body')[0].className = '';
				
				// 给“确认”按钮，添加点击事件
				mui(document).on('tap','#btn',function(){
					// 获取手机号码
					let tel = mui('#val')[0].value
					if(!/^[1]([3-9])[0-9]{9}$/.test(tel)){
						plus.nativeUI.toast('请输入正确手机号');
						return;
					}
					
					plus.nativeUI.showWaiting("加载中...");
					
					// 通过api接口查询(异步请求，mui.ajax())
					let key = 'e10adc3949ba59abbe56e057f20f883e';
					mui.ajax(`http://www.zhaotool.com/v1/api/lt/${key}/${tel}`,{
						data:{},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						headers:{'Content-Type':'application/json'},	              
						success:function(res){
							//服务器返回响应，根据响应结果，分析是否登录成功；
							// console.log(res.code)
							if(res.code==0){
								// 成功了
								mui('#mobile')[0].innerText = tel
								mui('#phoneArea')[0].innerText = res.data.phoneArea
								
								mui('#results')[0].className = 'content bs-bb'
							}else{
								plus.nativeUI.toast('请联系客服');
							}
							plus.nativeUI.closeWaiting();
						},
						error:function(xhr,type,errorThrown){
							//异常处理；
							console.log(type);
							plus.nativeUI.toast('网络异常,也可以联系客服');
							plus.nativeUI.closeWaiting();
						}
					});
				})
				
				// mui('#btn').addEventListener('tap',function(){})
				
			})
			//重写back
			let oldBack = mui.back;
			mui.back = function(){
				// 把详情内容的div隐藏
				document.getElementById('results').className = 'content bs-bb dp-n';
				
				// 把输入框的内容清空
				document.getElementById('val').value = '';
				
				oldBack();
			}
		</script>
	</body>

</html>